<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item title="订单基本信息" name="1">
                        <el-descriptions title="">
                            <el-descriptions-item label="订单编号">{{oDesc.orderId}}</el-descriptions-item>
                            <el-descriptions-item label="创建时间">{{oDesc.createTime}}</el-descriptions-item>
                            <el-descriptions-item label="最后操作时间">{{oDesc.lastUpdateTime}}</el-descriptions-item>
                            <el-descriptions-item label="报单时间">{{oDesc.getPdfTime}}</el-descriptions-item>
                            <el-descriptions-item label="支付状态">
                                <el-tag size="small" type="success" v-if="oDesc.payStatus==1">已支付</el-tag>
                                <el-tag size="small" v-else>未支付</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="订单状态">
                              <el-tag size="small" v-if="oDesc.orderStatus==1">待付款</el-tag>
                              <el-tag size="small" v-if="oDesc.orderStatus==2" type="warning">待发货</el-tag>
                              <el-tag size="small" v-if="oDesc.orderStatus==3">已发货</el-tag>
                              <el-tag size="small" v-if="oDesc.orderStatus==4" type="success">已完成</el-tag>
                              <el-tag size="small" v-if="oDesc.orderStatus==5" type="danger">售后中</el-tag>
                              <el-tag size="small" v-if="oDesc.orderStatus==6" type="info">已取消</el-tag>
                          </el-descriptions-item>
                            <el-descriptions-item label="收货人">{{oDesc.receiveName}}</el-descriptions-item>
                            <el-descriptions-item label="收货电话">{{oDesc.receiveTell}}</el-descriptions-item>
                            <el-descriptions-item label="收货详细地址">{{oDesc.receiveAddress}}</el-descriptions-item>
                        </el-descriptions>
                    </el-collapse-item>
                    <el-collapse-item title="购物车信息" name="2">
                      <div v-for="(item, index) in oDesc.orderInfos"
                      :key="item.oid"
                      >
                        <el-descriptions title="" column="4">
                            <el-descriptions-item label="商品名称">{{item.goodsName}}</el-descriptions-item>
                            <el-descriptions-item label="商品材质">{{item.goodsDesc}}</el-descriptions-item>
                            <el-descriptions-item label="购物车总数">{{item.zongshu}}</el-descriptions-item>
                            <el-descriptions-item label="购物车条数">{{item.tiaoshu}}</el-descriptions-item>
                            <!-- <el-descriptions-item label="报单时间">2025-12-12 12:21:21</el-descriptions-item> -->
                        </el-descriptions>
                        <div class="editImage_box">
                            <div class="editImage" v-for="eimage in item.editImages">
                                <div class="editImage_pic">
                                    <el-image
                                    style="width: 30px; height: 50px"
                                    :src="eimage.zpic"
                                    :fit="fit"
                                    :preview-src-list="item.eimageList"></el-image>
                                    <el-image
                                    style="width: 30px; height: 50px;margin-left:2px"
                                    :src="eimage.fpic"
                                    :fit="fit"
                                    :preview-src-list="item.eimageList"></el-image>
                                </div>
                                <div class="editImage_num">{{eimage.num}}份</div>
                            </div>
                        </div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="订单轨迹" name="3" v-if="oDesc.orderStatus==3||oDesc.orderStatus==4">
                        <div style="text-align: left;">
                            <el-timeline :reverse="reverse">
                                <el-timeline-item
                                  v-for="(activity, index) in oDesc.wuliuDescs"
                                  :key="index"
                                  :timestamp="activity.scanTime">
                                  {{activity.trackingDesc}}
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        tkIsShow:false,
        title:"",
        orderId:'',
        oDesc:null,
        activeNames: ['1','2','3'],
        reverse: true,
        activities: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }]
    };
  },
  methods: {
    __init(orderId) {
      this.orderId=orderId;
      this.getData();
    },
    getData(){
      var url="manager/getOrderDesc";
      var params={
        orderId: this.orderId
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.oDesc=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    closeTk(){
        this.tkIsShow = false;
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .tankuang{
    position: fixed;
    width: 70%;
    height: 80%;
    background-color: #fff;
    top: 10%;
    left: 15%;
    z-index: 101;
    border-radius: 5px;
  }
  .tk_title{
    font-size: 17px;
    margin: 15px 0;
    height: 25px;
    line-height: 25px;
  }
  .tk_content{
    width: 90%;
    margin-left: 5%;
    height: calc(100% - 55px);
    overflow-y: auto;
  }
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
  .editImage_box{
    text-align: left;
  }
  .editImage{
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin-right: 50px;
  }
</style>